import { useEffect, useState } from 'react';
import { Button } from 'react-vant';
function UseStateDemo() {
    // 第一个参数是参数，第二个参数是更新参数的方法
    const [count, setCount] = useState(0);
    const countAdd = () => {
        setCount(count + 1);
    }
    //使用第二个参数，监听效果，可以优化性能
    // 类似于vue的监听watch函数
    useEffect(() => {
        document.title = count
        console.log('当count变量有变化的时候才会触发')
        console.log(count)
    }, [count])

    const [width, setWidth] = useState(document.body.clientWidth)
    const onChange = () => {
        setWidth(document.body.clientWidth)
    }
    useEffect(() => {
        //相当于 componentDidMount
        window.addEventListener('resize', onChange, false)
        return () => {
            //相当于componentWillUnmount
            window.removeEventListener('resize', onChange, false)
        }
    }, [width])


    return (
        <>
            {/* <React.$Vant.Button>这个vant按钮</React.$Vant.Button> */}
            <h1>count的值{count}</h1>
            <Button type="info" onClick={countAdd}>按钮-点击-自增count</Button>
            页面名称: {count}
            页面宽度: {width}
            {/* <button onClick={() => { setCount(count + 1) }}>点我</button> */}
        </>
    )
}

export default UseStateDemo